<template>
	<view class="page">
		<view class="jui_h30">

		</view>
		<view class="" @tap="back">
			<image src="../../static/imgs/back1.png" mode="" style="height: 30upx;width: 20upx;"></image>
		</view>
		<view class="jui_h60">

		</view>
		<view class="tit">
			忘记密码
		</view>
		<view class="content">
			<view class="list">
				<input type="text" placeholder="请输入手机号码" v-model="info.phone">
				
			</view>
			<view class="list">
				<input type="text" placeholder="请输入验证码" v-model="info.verifycode">
				<button class="yzm_btn" :disabled="codeDisabled" @click="getCode">{{ codeMsg }}</button>
			</view>
			
			<view class="list">
				<input type="password" placeholder="请输入6位数登录密码" v-model="info.password">
				
			</view>
			<view class="list">
				<input type="password" placeholder="请再次输入6位数登录密码" v-model="info.repassword">
				
			</view>
			<view class="jui_h100">

			</view>
			<view class="">
				<view @tap="submit()" class="login jui_bor_rad_40 pad jui_text_center   jui_fc_fff  jui_fs30">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					
				},
				pwd_again:'',
				verifycode:"",
				codeMsg: '获取验证码',
				countdown: 60,
				codeDisabled: false,
				timer: null,
			}
		},
		onLoad() {
			
		},
		methods: {
			back() {
				uni.navigateBack({
					
				})
			},
			getCode() {
				if (!this.info.phone) {
					return this.$msg('请输入手机号码');
				}
				this.$api.setCode({ phone: this.info.phone }).then(res => {
					if(res.ok){
						this.$msg(res.data, 2000);
						this.codeDisabled = true;
						if (!this.timer) {
							this.timer = setInterval(() => {
								if (this.countdown > 0 && this.countdown <= 60) {
									this.countdown--;
									if (this.countdown !== 0) {
										this.codeDisabled = true;
										this.codeMsg = '重新发送(' + this.countdown + ')';
									} else {
										clearInterval(this.timer);
										this.codeMsg = '获取验证码';
										this.countdown = 60;
										this.timer = null;
										this.codeDisabled = false;
									}
								}
							}, 1000);
						}
					}else{
						this.$msg(res.data, 2000);
						this.codeDisabled = false;
					}
				})
			},
			submit(){
				if(!this.info.phone){
					return this.$msg("请输入手机号码");
				}
				if(!this.info.verifycode){
					return this.$msg("请输入手机验证码");
				}
				if(!this.info.password){
					return this.$msg("请输入登录密码");
				}
				if(this.info.password != this.info.repassword){
					return this.$msg("两次登录密码输入不一致");
				}
				this.$api.setPwd(this.info).then(res => {
					if(res.ok){
						this.$msg(res.msg);
						setTimeout(()=>{
							// uni.switchTab({
							// 	url:`/pages/login/login`
							// })
							uni.navigateTo({
								url:`/pages/login/login`
							})
						}, 800)
					}else{
						this.$msg(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.page {
		padding: 0 30upx;
		overflow: hidden;
	}

	.tit {
		font-size: 50upx;
		color: #383630;
		margin-top: 30upx;
		font-weight: 600;
	}

	.content {
		margin-top: 40upx;
		// padding: 0 30upx;

		.list {
			width: 100%;
			height: 100upx;
			border-bottom: 1upx solid #DEDEDE;
			font-size: 40upx;
			margin-bottom: 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-placeholder {
				color: #DBDCDF;
				font-size: 32upx;
			}

			input {
				height: 100%;
				font-size: 32upx !important;
				color: #333;
				flex: 1;
			}

			image {
				width: 44upx;
				height: 44upx;
			}

			view {
				width: 180upx;
				height: 66upx;

				font-size: 28upx;
				// background: $theme-color;
				border-radius: 50upx;
				text-align: center;
				line-height: 66upx;
			}
		}

		.bot {
			margin-top: 20upx;
			display: flex;
			align-items: center;
			font-size: 26upx;
			color: #333;

			text {
				color: #0091FF;
			}

			image {
				width: 28upx;
				height: 28upx;
				margin-right: 16upx;
			}
		}

		.btn {
			width: 70%;
			height: 80upx;
			font-size: 32upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			// background: $theme-color;
			margin: 60upx auto;
			border-radius: 50upx;
		}
	}
	.login {
		background-color: $zhuse;
	}
	.pad {
		padding: 20rpx 0;
	}
</style>
